<template>
    <div class="container">

        <el-page-header class="go-back" @back="goBack" content="所有门店"></el-page-header>

        <div class="shop">
            <div class="left">

            </div>
            <div class="right">
                <div class="shop-name">{{shop.name}}</div>
                <div class="shop-explain">  </div>
            </div>
        </div>

        <div class="goods">
            <div class="goods-item" v-for="(item,index) in goodsList" :key="index">
                <div class="goods-left">

                </div>
                <div class="goods-right">
                    <div class="goods-name">{{item.name}}</div>
                    <div class="goods-explain"></div>
                    <div class="goods-explain">￥&nbsp;{{item.price}}</div>
                </div>
                <el-input-number class="goods-num" v-model="item.num" size="mini" :min="0" :max="100" @change="goodsNumChange(item)"></el-input-number>
            </div>
        </div>

        <el-tooltip placement="top" effect="light">
            <div slot="content">
                <div class="tips-content">
                    <div class="tips-content-item">
                        <div class="goods-name-tips">商品名称</div>
                        <div class="goods-num-tips">数量</div>
                        <div class="goods-unitPrice-tips">单价</div>
                        <div class="goods-price-tips">价格</div>
                    </div>
                    <div class="tips-content-item" v-for="(item,index) in selectGoodsList" :key="index">
                        <div class="goods-name-tips">{{item.itemName}}</div>
                        <div class="goods-num-tips">{{item.count}}</div>
                        <div class="goods-unitPrice-tips">￥{{item.unitPrice}}</div>
                        <div class="goods-price-tips">￥{{item.price}}</div>
                    </div>
                </div>
            </div>
            <el-button @click="toOrder()" class="order-btn" type="primary" icon="el-icon-shopping-cart-full" round>
                去结算
                <div class="goods-num-count">{{selectGoodsList.length}}</div>
                <div class="calc-price">结算价:<span style="color: red">￥{{this.orderDto.price || 0}}</span></div>
            </el-button>
        </el-tooltip>


    </div>
</template>

<script>
    import {userShopItems,updateLineItem} from '../../../api/common'
    export default {
        name: "Goods",
        components:{

        },
        data(){
            return{
                user:{},
                shop:{},
                selectGoodsList:[],
                goodsList:[],
                orderDto:{},
            }
        },
        created() {
            let shopJson = localStorage.getItem("bus-shop")
            if (shopJson){
                this.shop = JSON.parse(shopJson)
            } else {
              this.$message("无商家数据，请重新进入");
              this.$router.push("/shopList")
            }
            let userJson = localStorage.getItem('bus-user');
            if (userJson) {
                let user = JSON.parse(userJson);
                this.user = user
                this.queryGoods()
            } else {
                this.$message.info("请您重新登陆")
            }
        },
        methods:{
            goBack(){
                this.$router.push("/shopList")
            },
            toOrder(){
                if (this.orderDto.orderNo){
                    this.$router.push({
                        path: '/orderDetail',
                        query:{
                            orderNo:this.orderDto.orderNo,
                        }
                    })
                } else {
                  this.$message.info("请选择商品")
                }
            },
            queryGoods(){
                let param = {
                    shopId:this.shop.id,
                    userId:this.user.id
                }
                userShopItems(param).then(res => {
                    if (res.code == 200) {
                        this.goodsList = res.data.shopItems
                        if (res.data.orderDto == null){
                            this.orderDto = {}
                            this.selectGoodsList = []
                            this.goodsList.forEach((item)=>{
                                item.num = 0
                            })
                        }else {
                            this.goodsList.forEach((item)=>{
                                item.num = 0
                            })
                            this.orderDto = res.data.orderDto
                            this.selectGoodsList = res.data.orderDto.lineItems
                            this.goodsList.forEach((item)=>{
                                for(let item2 of res.data.orderDto.lineItems){
                                    if (item.id == item2.itemId){
                                        item.num = item2.count
                                        break;
                                    }
                                }
                            })
                        }
                    }else {
                        this.$message.error(res.msg || "查询门店数据失败")
                    }
                })
            },
            goodsNumChange(item){
                let param = {
                    orderNo: this.orderDto.orderNo || '',
                    businessId:this.shop.businessId,
                    shopId:this.shop.id,
                    itemId:item.id,
                    userId:this.user.id,
                    num:item.num,
                    unitPrice:item.price,
                }
                 updateLineItem(param).then(res => {
                    if (res.code == 200 && res.data == true){
                        this.queryGoods()
                    } else {
                        this.$message.error(res.msg || "更新数据失败")
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .container{
        width: 70%;
        min-height: 100%;
        height: auto;
        margin-left: 15%;
        background-color: #ffffff;
        position: absolute;
    }
    .go-back{
        margin-left: 10%;
        margin-top: 30px;
    }
    .shop{
        float: left;
        width: 100%;
        height: auto;
        border-bottom: #dfd1d1 solid 1px;
    }
    .left{
        float: left;
        width: 230px;
        height: 235px;
        overflow: hidden;
        margin: 50px 10px 10px 30%;
        background-color: #42b983;
    }
    .right{
        width: 35%;
        height: 235px;
        float: left;
        margin: 50px 10px 10px 10px;
    }
    .shop-img{
        width: 200px;
        height: 200px;
        overflow: hidden;
    }
    .shop-name{
        font-weight: bold;
        font-size: 22px;
        height: 40px;
    }
    .goods{
        float: left;
        width: 100%;
        height: auto;
        margin-top: 50px;
    }
    .goods-item{
        width: 35%;
        margin-left: 10%;
        margin-top: 20px;
        float: left;
        position: relative;
    }
    .goods-left{
        float: left;
        margin: 10px;
        width: 120px;
        height: 120px;
        background-color: green;
    }
    .goods-right{
        float: left;
        width: calc(100% - 180px);
        padding: 10px;
    }
    .goods-name{
        font-weight: bold;
        font-size: 18px;
        height: 30px;
    }
    .goods-num{
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
    .order-btn{
        position: fixed;
        width: 150px;
        bottom: 50px;
        right: 16%;
        z-index: 99;
    }
    .goods-num-count{
        position: absolute;
        top: 8px;
        right: 15px;
        width: 20px;
        height: 20px;
        background-color: red;
        color: white;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
    }
    .tips-content{
        width: 600px;
    }
    .tips-content-item{
        height: 30px;
        font-size: 15px;
    }
    .goods-name-tips{
        width: 50%;
        float: left;
        margin-left: 3%;
        overflow: hidden;
    }
    .goods-num-tips,.goods-unitPrice-tips,.goods-price-tips{
        width: 12%;
        float: left;
        margin-left: 3%;
    }
    .calc-price{
        color: black;
        position: absolute;
        bottom: -22px;
        font-size: 16px;
    }

</style>